<template>
    <div class="collapse">
        <slot></slot>
    </div>
</template>

<script>
/**
 * Collapse 折叠面板
 * @description 展示可以折叠 / 展开的内容区域
 * @tutorial https://ext.dcloud.net.cn/plugin?id=23
 * @property {Boolean} accordion = [true|false] 是否开启手风琴效果是否开启手风琴效果
 * @event { Function } change 切换面板时触发，activeNames（Array）：展开状态的uniCollapseItem的 name 值
 */
export default {
  name: "Collapse",
  props: {
    accordion: {
      // 是否开启手风琴效果
      type: [Boolean, String],
      default: false
    }
  },
  provide() {
    return {
      collapse: this
    }
  },
  data() {
    return {
      isOpen: false
    };
  },
  created() {
    this.childrens = []
  },
  methods: {
    onChange() {
      let activeItem = [];
      this.childrens.forEach((vm) => {
        if (vm.isOpen) {
          activeItem.push(vm.nameSync)
        }
      });
      this.$emit('change', activeItem)
    }
  }
}
</script>

<style scoped>
    .collapse {
        flex-direction: column;
        background-color: #ffffff;
    }
</style>
